@import '../../../global/globalStyle.less';

.topologyVue {
  height: 100%;
  .topologyVue-container {
    height: 100%;
  }
  .menus {
    height: calc(@header / 2);
    .item {
      display: none;
      line-height: calc(@header / 2);
    }
    .item:nth-child(1),
    .item:nth-child(2),
    .item:nth-child(3),
    .item:nth-last-child(3),
    .item:nth-last-child(4),
    .item:nth-last-child(5),
    .item:nth-last-child(6),
    .item:nth-last-child(7),
    .item:nth-last-child(8) {
      display: block;
    }
    .item.logo, .full {
      display: none;
    }
  }
  .materials {
    height: calc(100vh - @header * 1.8) !important;
    .more-graphical {
      position: absolute;
    }
  }
  .panel-content {
    height: calc(100vh - @header * 2.5) !important;
  }
  .tips {
    ul li {
      padding: 0 10px;
      line-height: 2.5;
      margin: 0 !important;
    }
  }
  #topology-canvas {
    background-image: linear-gradient(white 0.5px,transparent 0),
      linear-gradient(90deg, white 0.5px, transparent 0),
      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0),
      linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 0);
    background-size: 30px 30px, 30px 30px, 15px 15px, 15px 15px;
  }
  .el-dialog {
    .el-dialog__close.el-icon.el-icon-close {
      font-size: 2em;
      font-weight: bold;
      color: @primary-color;
    }
    .el-dialog__body {
      height: calc(100vh - @header);
    }
    .el-divider {
      margin-top: 0;
      .el-divider__text {
        font-size: 1.2em;
        color: @primary-color;
        letter-spacing: 0.5rem;
      }
    }
    .preview-container {
      height: calc(100vh - @header - 80px);
    }
    #topology-canvas {
      &::-webkit-scrollbar {
        width: 0.8rem;
        height: 0.8rem;
        background: none;
      }
      div, textarea {
        display: none;
      }
    }
    pre {
      overflow: auto;
      line-height: 1.5;
      font-size: 1.1em;
      max-height: calc(100vh - @header - 80px);
    }
  }
}